@extends('admin.layouts.application')

@section('css')
    <style>
    .serach{
        display: block;
        margin:20px;
    }
     .serach_first{
         margin-left: 20px;

     }
     .add{
         display: inline-blockn;
     }
     .add_title{
         position: absolute;
         float: left;

     }
    .serach_input{
        float: left;
    }
    .add_customer2{
        float: left;
    }
    .add_customer1 {
        float: right;
        margin-left: 20px;
    }
    .img{
          max-height: 100px;
        }

    </style>


@endsection


@section('content')
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="serach">
                <button type="button" class="am-btn add_customer2"><a href="/admin/customer/create">新增客户</a></button>
                <form class="am-form-inline serach_input" role="form">
                    <div class="am-form-group">
                        <input type="text" class="am-form-field serach_first " placeholder="客户名">
                    </div>

                    <div class="am-form-group">
                        <input type="text" class="am-form-field" placeholder="客户ID">
                    </div>

                    <div class="am-form-group">
                        <input type="text" class="am-form-field" placeholder="注册时间">
                    </div>

                    <button type="submit" class="am-btn am-btn-default">搜索</button>
                </form>

                <div class="add_customer" >
                    <button type="button" class="am-btn am-btn-success add_customer1" id="doc-prompt-toggle">快速新增客户</button>

                    <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
                        <div class="am-modal-dialog">
                            <div class="am-modal-hd">新增客户信息</div>
                            <div class="am-modal-bd">

                                {!! csrf_field() !!}
                                <div class="add"><p class="add_title">客户名</p><input type="text" class="am-modal-prompt-input add_name" name="" value=""/></div>
                                <div class="add"><p class="add_title">Email</p><input type="text" class="am-modal-prompt-input add_email" name="" value=""/></div>
                                <div class="add"><p class="add_title">电话</p><input type="text" class="am-modal-prompt-input add_primary_tel" name="" value=""/></div>
                                <div class="add"><p class="add_title">公司</p><input type="text" class="am-modal-prompt-input add_company" name="" value=""/></div>

                            </div>
                            <div class="am-modal-footer">
                                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="am-g">
                <div class="am-u-sm-12">
                    <table class="am-table am-table-bd am-table-striped admin-content-table">
                        <thead>
                        <tr>
                            <th>客户ID</th>
                            <th>用户头像</th>
                            <th>用户名</th>
                            <th>公司</th>
                            <th>电话</th>
                            <th>邮件</th>
                            <th>管理</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($customers as $c)
                            <div class="customer_info">
                                <tr data-id="{{$c->id}}">
                                    <td>{{$c->id}}</td>
                                    <td><img src="{{$c->thumb}}" class="img"/></td>
                                    <td>{{$c->name}}</td>
                                    <td>{{$c->company}}</td>
                                    <td>{{$c->primary_tel}}</td>
                                    <td>{{$c->email}}</td>
                                    <td class="not_show">
                                        <div class="am-dropdown" data-am-dropdown>
                                            <button class="am-btn am-btn-default am-btn-xs am-dropdown-toggle" data-am-dropdown-toggle><span class="am-icon-cog"></span> <span class="am-icon-caret-down"></span></button>
                                            <ul class="am-dropdown-content">
                                                <li><a href="{{route('admin.customer.edit', $c->id)}}">编辑</a></li>
                                                <li><a href="#">删除</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            </div>
                    @endforeach
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script type="application/javascript">
    $(function() {
        $("tr td[class!='not_show']").click(function () {
            var id = $(this).parent().data('id');
            location.href="/admin/customer/"+id;
        });
        $('#doc-prompt-toggle').on('click', function() {
         $('#my-prompt').modal({
            onConfirm: function(data) {
                var data = {
                    name: $(".add_name").val(),
                    email:$(".add_email").val(),
                    primary_tel:$(".add_primary_tel").val(),
                    company:$(".add_company").val(),
                }
                //console.log(data)
                $.ajax({
                    type: "POST",
                    url: "/admin/customer/add_customer",
                    data: data,
                    success:function () {
                        location.href=location.href;
                    }
                })
            },
            onCancel: function() {
            alert('确认取消新增用户信息吗？');
            }
         });
        });
    });
    </script>
@endsection